<template>
  <div class="left-top">
    <div class="headers_order_bottom">
      <div class="headers_right">
        <span>销售订单详情</span>
      </div>
      <div class="headers_left">
        <div class="headers_left_input">
          <el-input
            placeholder="输入标题关键词"
            suffix-icon="el-icon-search"
            v-model="input1"
          >
          </el-input>
        </div>
        <div class="headers_left_more" @click="search()">查询</div>
      </div>
    </div>
    <div class="content">
      <div class="content_table">
        <el-table
          :data="mockData"
          width="100%"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          @row-click="handleRowClick"
        >
          <el-table-column prop="xh" label="序号" width="80" />
          <el-table-column prop="djh" label="合同备案号" min-width="200" />
          <el-table-column prop="khmc" label="客户名称" min-width="150" />
          <el-table-column prop="xsddh" label="销售订单号" min-width="150" />
          <el-table-column prop="cpmc" label="产品名称" min-width="150" />
          <el-table-column prop="xdsj" label="下单时间" min-width="150" />
          <el-table-column prop="yjjhsj" label="预计交货时间" min-width="150" />
          <el-table-column prop="xdsl" label="下单数量" min-width="150" />
          <el-table-column prop="rksl" label="入库数量" min-width="150" />
          <el-table-column prop="yfsl" label="已发数量" min-width="150" />
        </el-table>
      </div>
      <div class="notice_box_bottom_table_fy" v-if="mockData.length > 0">
        <!-- 其他内容 -->
        <my-pagination
          :current-page="currentPage4"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="totalItems"
          @size-change="onSizeChange"
          @current-change="onPageChange"
        />
      </div>
    </div>
  </div>
</template>
    
    
    
    <script>
import { getNavbar } from "@/api/index";
import MyPagination from "../../components/MyPagination.vue";
export default {
  name: "LeftTop",
  data() {
    return {
      portalPath:window.portalPath,
      currentPage4: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 40],
      totalItems: 300,
      input1: "",
      titles: ["已办", "待阅", "已阅", "发起追踪", "委托设置"],
      selectedTitle: null, // 用于存储选中的标题
      hoverIndex: -1,
      mockData: [
        { title: "任务1", source: "来源A", duration: "2小时" },
        { title: "任务2", source: "来源B", duration: "1小时" },
        { title: "任务3", source: "来源C", duration: "3小时" },
        { title: "任务4", source: "来源D", duration: "4小时" },
        { title: "任务5", source: "来源E", duration: "1.5小时" },
        { title: "任务6", source: "来源F", duration: "2.5小时" },
        { title: "任务7", source: "来源G", duration: "3小时" },
        { title: "任务8", source: "来源H", duration: "2小时" },
        { title: "任务9", source: "来源I", duration: "4.5小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
      ].map((item, index) => ({ ...item, index: index + 1 })),
    };
  },
  props: {
    xmbh: {
      type: String,
      required: true,
    },
  },
  components: {
    MyPagination,
  },
  mounted() {
    this.getlist();
  },
  methods: {
    search() {
      this.getlist();
    },
    //查询
    getlist() {
      if (!this.xmbh) {
   
        return; // 如果未传递，提前返回
      }
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.order.getContarctByOrder",
        xmbh: this.xmbh,
        pageSize: this.pageSize,
        currentPage: this.currentPage4,
        djh: this.input1,
      };
      getNavbar(param).then((res) => {
      
        this.mockData = res.data.orderSaleList;
        this.totalItems = res.data.totalItems;
      });
    },
    onSizeChange(size) {

      this.pageSize = size;
      this.getlist();

      // 处理页面大小变化
    },
    onPageChange(page) {
 
      this.currentPage4 = page;
      this.getlist();

      // 处理当前页变化
    },
    handleRowClick(row) {
      // 打印当前选中行的数据
      const newWindow = window.open(
        portalPath+"/r" + row.openUrl.slice(1),
        "_blank"
      );

      // 检查是否成功打开窗口
      if (newWindow) {
        const checkClosed = setInterval(() => {
          // 如果新窗口已经关闭
          if (newWindow.closed) {
            clearInterval(checkClosed);
            // 执行关闭后需要的操作
            this.getyear();
            this.getlist();
            // 可以在这里执行其他操作，比如刷新数据或显示提示
          }
        }, 500); // 每500毫秒检查一次
      } else {
     
      }
    },
    cellStyle() {
      return {
        color: "#333333", // 字体颜色
        fontSize: "12px", // 字体大小
      };
    },
    headerCellStyle() {
      return {
        backgroundColor: "rgba(57, 92, 153, 0.1)", // 表头背景色（蓝色）带透明度
        color: "#333333" /* 表头文字颜色（白色） */,
        fontWeight: "700" /* 表头文字加粗 */,
        fontSize: "13px" /* 表头文字大小 */,
      };
    },
    selectTitle(title) {
      this.selectedTitle = title; // 更新选中的标题
      // 可以在这里传递参数
      this.passParameter(title); // 例如，调用一个方法传递参数
    },
    passParameter(title) {
  
      // 在这里可以进行进一步的操作，比如发起 API 请求等
    },
  },
};
</script>
    
    <style scoped>
/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.content_table::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.content_table {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.content_table {
  min-height: 400px; /* 设置最小高度，根据需要调整 */
  max-height: 400px; /* 设置最大高度，根据需要调整 */
  overflow-y: auto; /* 超出部分显示滚动条 */
}

.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  padding: 20px;
  border-radius: 10px;
}

.headers_order_bottom {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.headers_order_bottom .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right  span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right .headers_right_title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left {
  display: flex;
  align-items: center;
}
.headers_left_input {
  margin-right: 20px;
}
.headers_left_input /deep/ .el-input__icon {
  line-height: 29px !important;
}
.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_order_bottom span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
}

.bottom {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 14px;
  color: #1e4398;
  text-align: right;
  cursor: pointer;
  margin-top: 10px;
}
.headers_right_title.selected {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  position: relative;
}
.selected-image {
  width: 30px;
  position: absolute;
  left: 28%;
  top: 35px;
}

.el-table tbody tr > td {
}

/deep/.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/.el-table tr {
  background-color: transparent !important;
}

/deep/.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #265ec0 !important;
}
.notice_box_bottom_table_fy {
  text-align: right;
  margin-top: 10px;
}
</style>
    